<template>
	<view class="container">
		<!-- 1：顶端，返回箭头 -->
		<nav-bar :showBack="true" />
		<!-- 2：线路列表 -->
		<div class="list">
			<view class="lines">
				<template v-if="lineList && lineList.length > 0">
					<text class="line" :class="lineId == 0 ? 'on' : ''" @click="switchLine(0)">全部</text>
					<text class="line" :class="lineId == line.lineId ? 'on' : ''" v-for="(line, index) in lineList"
						:key="index" @click="switchLine(line.lineId)">{{ line.lineName }}</text>
				</template>
			</view>
			<view class="steps">
				<scroll-view class="scroll-view" scroll-y="true">
					<view class="step" v-for="(step, sIndex) in stepList" :key="sIndex" @click="goStep(step.name)">
						<text class="sname">{{ step.name }}</text>
						<view class="slines">
							<text class="sline" v-for="(line, lIndex) in step.lines"
								:key="lIndex">{{ line.lineName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</div>
	</view>
</template>

<script>
	import {
		getLineList,
		getStepList
	} from '@/api/metro.js'
	export default {
		data() {
			return {
				lineList: null,
				lineId: 0,

				stepList: null
			}
		},
		onLoad() {
			this.getLineList();
		},
		methods: {
			// 获取线路列表
			getLineList() {
				const _that = this;
				getLineList()
					.then((res) => {
						_that.lineList = res.data;
						_that.getStepList();
					});
			},
			// 获取站点列表
			getStepList(lineId) {
				const _that = this;
				getStepList(lineId)
					.then((res) => {
						_that.stepList = res.data;
					});
			},
			// 切换线路
			switchLine(lineId) {
				this.lineId = lineId;
				this.getStepList(this.lineId);
			},
			// 跳转到站点详情页
			goStep(name) {
				uni.navigateTo({
					url: `/pages/metro/detail?name=${encodeURIComponent(name)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.list {
			width: 100vw;
			height: calc(100vh - 45px);
			overflow: hidden;
			display: flex;
			justify-content: space-between;

			.lines {
				width: 30%;
				height: 100%;
				box-sizing: border-box;

				.line {
					width: calc(100% - 1.6rem);
					padding: 0 0.8rem;
					display: block;
					overflow: hidden;
					line-height: 2.4rem;
					border-right: 1px solid #dcdcdc;
					border-bottom: 1px solid #dcdcdc;

					&.on {
						background-color: $uni-bg-color;
						border: none;
					}
				}
			}

			.steps {
				width: 70%;
				height: 100%;
				background-color: $uni-bg-color;

				.step {
					width: calc(100% - 1.6rem);
					padding: 0.6rem 0.8rem;
					overflow: hidden;
					border-bottom: 1px solid #dcdcdc;

					.sname {
						width: 100%;
						line-height: 1.6rem;
						display: block;
					}

					.slines {
						width: 100%;

						.sline {
							display: inline-block;
							color: white;
							font-size: 0.6rem;
							line-height: 0.8rem;
							padding: 0.2rem 0.6rem;
							background-color: $uni-color-primary;
							border-radius: 1.2rem;
							margin-right: 0.8rem;
						}
					}
					
					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}
</style>
